<template>
  <div class="setPosition">
    <span class="cardHeader">热门机构</span>
    <div v-for="(item) in institutes" :key="item.affiliationId" @click="openDetailDialog(item)">
      <p class="scholars">{{item.name}}</p>
      <hr/>
    </div>
  </div>



    <div>
      <el-dialog v-model="isInstDialogVisible" title="机构信息" >
        <p class="instName">{{dealInfo.name}}</p>
        <p class="instName">{{dealInfo.paperCount}}</p>
        <p class="instName">{{dealInfo.citationCount}}</p>
        <p class="instName">{{dealInfo.countryCode}}</p>
        <div class="officialUrl">
          <p  v-show="dealInfo.officialPage.includes('.')" >官方网站：</p>
          <a  v-show="dealInfo.officialPage.includes('.')" :href="instituteDetail.officialPage">{{instituteDetail.officialPage}}</a>
        </div>
      </el-dialog>
    </div>



</template>

<script>
import axios from "@/utils/MyAxios";
import qs from "qs";

export default {
  name: "IndexHotInstitutes",

  data() {
    return {
      isInstDialogVisible: false,
      institutes: [],
      instituteDetail: {}
    }
  },

  computed: {
    dealInfo() {
      let dict = {
        name: '机构名称：\t'+this.instituteDetail.name,
        paperCount: '机构文献数量统计：\t'+this.instituteDetail.paperCount,
        citationCount: '被引数量：\t'+this.instituteDetail.citationCount,
        countryCode: '所属国家码：\t'+this.instituteDetail.countryCode,
        officialPage: '机构官网：\t'+this.instituteDetail.officialPage,
      }

      return dict
    }
  },

  mounted() {
    this.getHotInstitutes()
  },

  methods: {

    getHotInstitutes() {
      let data = {}
      axios.post('/api/index/affiliationFocus',qs.stringify(data)).then(res => {
        console.log(res);
        if (res.data.code === 0) {
          this.institutes = res.data.data
        }
      })
    },

    openDetailDialog(item) {
      console.log(item.affiliationId);

      let data = {affiliationId: item.affiliationId}
      axios.post('/api/affiliation/info', qs.stringify(data)).then(res => {
        console.log(res);
        if (res.data.code === 0) {
          this.instituteDetail = res.data.data
          this.isInstDialogVisible = true
        }
        else {
          ElMessage({
            message: '网络繁忙，请稍后再试',
            type: 'warning',
          })
        }
      })
    },


  },


}
</script>

<style scoped>

.cardHeader {
  margin-top: 1%;
  font-family: serif;
  font-size: large;
  color: white;

}

.scholars {
  font-family: "Apple SD Gothic Neo",serif;
  font-size: medium;
  font-weight: bold;
  width: 500px;
  color: #addcf5;

  cursor: pointer;
}


.instName {
  display: flex;
  align-items: center;
  width: 100%;
  font-size: 120%;
}

.setPosition {
  margin-left: 120px;
}

.officialUrl {
  display: flex;
  align-items: baseline;
}


</style>